﻿
@using HyperCrunch.Druid.Sample
@using HyperCrunch.Druid.Mobile
@{
    AppModel model = (AppModel)Model;
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>@model.AppContext.PortalSettings.PortalName</title>

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
    <script type="text/javascript" src="@(model.Script)"></script>
    <script type="text/javascript" src="@(model.AssetUrl)/knockout-1.2.1.js"></script>
	<link rel="stylesheet" href="@(model.Stylesheet)" />
    @model.HelperScript
</head>
<body>


@* This is the App's main View page *@
<div data-role="page" id="main">
    <div data-role="header">
        @if (!String.IsNullOrEmpty(model.ReturnUrl))
        {
            <a href="@model.ReturnUrl" data-icon="back" data-direction="reverse" class="ui-btn-left jqm-back" rel="external">Back</a>
        }
        <h1>@model.Title</h1>
    </div>

    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-filter="true" data-theme="c" data-divider-theme="e" data-split-theme="e">
        @foreach (Product product in model.Products)
        {
            <li class="product-row">
                <a href="@(model.DetailUrl(product.Id))#detail" rel="external">
                    <img class="product-thumb" src="@product.Image" />
				    <h3>@product.Name</h3>
                    <div class="rating-star-bg">
                        <div class="rating-star" style="width: @(product.Rating * 24)px"></div>
                    </div>
                </a>
            </li>
        }
        </ul> 
    </div>            
</div>

@* 

This is the Module's Detail page; it's populated using Ajax 
The anchor with class "product-link" has a click event bound
using jquery that switches the display to the "detail" page below

*@
<div data-role="page" id="detail" rel="@(model.RouteUrl("/Detail/" + model.ProductId))">
    <div data-role="header">
        <a href="@(model.ListUrl)#main" data-icon="back" data-direction="reverse" class="ui-btn-left jqm-back" rel="external">Back</a>
			<h1 data-bind="text: Name"></h1>
        @if (model.CanEdit)
        {
            <a href="#edit" data-rel="dialog" data-icon="edit" data-transition="pop" class="ui-btn-right">Edit</a>
        }
	</div>
	<div data-role="content" data-theme="c" id="ProductDetail">
        <div class="product-wrapper">
            <img data-bind="attr: { src: Image, alt: Name }" />
        </div>
        <ul data-role="listview" data-inset="true">
            <li data-bind="text: Name" data-theme="e"></li>
            <li data-bind="text: Description" data-theme="d" class="product-description"></li>
            <li data-theme="d">Current Inventory: <span data-bind="text: Inventory"></span></li>
        </ul>
        <div class="product-wrapper"><div class="rating-star-bg"><div class="rating-star" data-bind="style : { width : (Rating * 24) + 'px' }"></div></div></div>
        <a data-role="button" data-theme="b" data-bind="attr : { href: WikiaUrl }" target="_blank">View on Wookiepedia</a>
        <a data-role="button" data-theme="b" data-bind="attr : { href: BuyUrl }" target="_blank">Buy at Amazon</a>
	</div>
</div>

@* Ths is the Module's Add page, displayed in a dialog *@
<div data-role="page" id="edit">
		<div data-role="header" data-theme="d">
			<h1>Edit <span data-bind="text: Name"></span></h1>
		</div>

		<div data-role="content" data-theme="c">
            <form method="post" action="@(model.RouteUrl("/Update/" + model.ProductId))" data-ajax="false">
	            <label for="name">Description:</label>
	            <textarea name="description" id="description" data-bind="value: Description"></textarea>
                <input type="hidden" id="returnUrl" name="returnUrl" value="@(model.DetailUrl(model.ProductId))#detail" />
                <input type="submit" data-theme="b" name="Save" value="Save" />
			    <a href="#main" data-role="button" data-rel="back" data-theme="c">Cancel</a>    
            </form>
		</div>
</div>

</body>
</html>